<template>
  <view class="boxtop" :style="'padding-top:' + statusBarHeight + 'px;'">
    <!-- <view class="healtharchives">
      <image @tap="back" src="../static/image/pagesDelivery/goback.png" mode="scaleToFill" />
      <text>健康档案</text>
    </view> -->
    <view class="healthname">
      <view>
        <view
          style="margin-top: 18rpx; font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 32rpx; align-items:center; display:flex;">
          <text>{{ TestingDetailsData.checkedPersonName }}</text>
          <image style="width:32rpx;height:32rpx;" src="../static/image/pagesHealth/man.png" mode="scaleToFill" />
        </view>
        <view style="margin-top: 26rpx;"><text>联系方式:{{ TestingDetailsData.checkedPersonPhone }}</text></view>
      </view>
      <view style="text-align: center;">
        <view style="font-family: PingFang SC, PingFang SC;font-weight: 500;">
          <text style="font-size:28rpx; color:#D12C25;">餐后</text>
          <text style="font-size: 20rpx;">/餐前</text>
        </view>
        <view>
          <image style="width:64rpx;height:64rpx;" src="../static/image/pagesHealth/heartrate.png" mode="scaleToFill" />
        </view>
        <view v-if="TestingDetailsData.isArrhythmia == 0">心率不齐</view>
        <view v-if="TestingDetailsData.isArrhythmia == 1">心率正常</view>
      </view>
    </view>
    <view class="self">
      <view style="margin-bottom: 20rpx; margin-left:16rpx; font-size:32rpx;">
        <text>健康监测</text>
      </view>
      <view style="display: flex; justify-content:space-between;flex-wrap: wrap;">
        <view class="myselfdata"
          :style="{ backgroundColor: TestingDetailsData.heartRateStatus == 0 ? '#ffffff' : TestingDetailsData.heartRateStatus == 1 ? '#fff5f5' : '#FFFCF5' }">
          <view style="display: flex; align-items:center">
            <view>
              <view style="width: 128rpx;">心率</view>
              <text style="font-size: 24rpx;" v-if="TestingDetailsData.heartRateStatus == 0">暂无异常</text>
              <text
                style="font-size: 24rpx; color:#FF0000; width: 96rpx;height: 34rpx;  display: flex; align-items: center;"
                v-if="TestingDetailsData.heartRateStatus == 1">过高
                <view
                  style="width: 28rpx;height: 28rpx;display: flex; align-items: center; justify-content: center; border: 2rpx solid #FF0000; border-radius: 50%; margin-left: 10rpx;">
                  <u-icon name="error" color="#FF0000" size="20"></u-icon>
                </view>
              </text>
              <text
                style="font-size: 24rpx; color: #D89C03;width: 96rpx;height: 34rpx; display: flex; align-items: center;"
                v-if="TestingDetailsData.heartRateStatus == 2">偏低
                <view
                  style="width: 28rpx;height: 28rpx;display: flex; align-items: center; justify-content: center; border: 2rpx solid #D89C03; border-radius: 50%; margin-left: 10rpx;">
                  <u-icon name="error" color="#D89C03" size="20"></u-icon>
                </view>
              </text>
            </view>
            <view><text class="detectionNum"
                :style="{ color: TestingDetailsData.heartRateStatus == 0 ? '#008535' : TestingDetailsData.heartRateStatus == 1 ? '#960202' : '#D89C03' }">{{
                  TestingDetailsData.heartRate }}</text>次/分</view>
          </view>
          <view style="margin-top: 76rpx; display:flex; justify-content:space-between;">
            <view>
              <view style="font-size:30rpx;">
                60-100
              </view>
              <view style="color:#999999;">
                标准范围
              </view>
            </view>
            <view>
              <image style="width:64rpx;height:64rpx;" src="../static/image/pagesHealth/heartrate.png"
                mode="scaleToFill" />
            </view>
          </view>
        </view>
        <view class="myselfdata"
          :style="{ backgroundColor: TestingDetailsData.highBloodPressure == 0 ? '#ffffff' : TestingDetailsData.highBloodPressure == 1 ? '#fff5f5' : '#FFFCF5' }">
          <view style="display: flex; align-items:center">
            <view>
              <view style="width: 128rpx;">高血压</view>
              <text style="font-size: 24rpx;" v-if="TestingDetailsData.highBloodPressure == 0">暂无异常</text>
              <text
                style="font-size: 24rpx; color:#FF0000; width: 96rpx;height: 34rpx;  display: flex; align-items: center;"
                v-if="TestingDetailsData.heartRateStatus == 1">过高
                <view
                  style="width: 28rpx;height: 28rpx;display: flex; align-items: center; justify-content: center; border: 2rpx solid #FF0000; border-radius: 50%; margin-left: 10rpx;">
                  <u-icon name="error" color="#FF0000" size="20"></u-icon>
                </view>
              </text>
              <text
                style="font-size: 24rpx; color: #D89C03;width: 96rpx;height: 34rpx; display: flex; align-items: center;"
                v-if="TestingDetailsData.heartRateStatus == 2">偏低
                <view
                  style="width: 28rpx;height: 28rpx;display: flex; align-items: center; justify-content: center; border: 2rpx solid #D89C03; border-radius: 50%; margin-left: 10rpx;">
                  <u-icon name="error" color="#D89C03" size="20"></u-icon>
                </view>
              </text>
            </view>
            <view><text
                style="width: 130rpx; font-size: 40rpx; color:#008535;">{{ TestingDetailsData.highBloodPressure }}</text>mmHG
            </view>
          </view>
          <view style="margin-top: 76rpx; display:flex; justify-content:space-between;">
            <view>
              <view style="font-size:30rpx;">
                140-90
              </view>
              <view style="color:#999999;">
                标准范围
              </view>
            </view>
            <view>
              <image style="width:64rpx;height:64rpx;" src="../static/image/pagesHealth/hypertension.png"
                mode="scaleToFill" />
            </view>
          </view>
        </view>
        <view class="myselfdata"
          :style="{ backgroundColor: TestingDetailsData.lowBloodPressureStatus == 0 ? '#ffffff' : TestingDetailsData.lowBloodPressureStatus == 1 ? '#fff5f5' : '#FFFCF5' }">
          <view style="display: flex; align-items:center">
            <view>
              <view style="width: 128rpx;">低血压</view>
              <text style="font-size: 24rpx;" v-if="TestingDetailsData.lowBloodPressureStatus == 0">暂无异常</text>
              <text
                style="font-size: 24rpx; color:#FF0000; width: 96rpx;height: 34rpx;  display: flex; align-items: center;"
                v-if="TestingDetailsData.heartRateStatus == 1">过高
                <view
                  style="width: 28rpx;height: 28rpx;display: flex; align-items: center; justify-content: center; border: 2rpx solid #FF0000; border-radius: 50%; margin-left: 10rpx;">
                  <u-icon name="error" color="#FF0000" size="20"></u-icon>
                </view>
              </text>
              <text
                style="font-size: 24rpx; color: #D89C03;width: 96rpx;height: 34rpx; display: flex; align-items: center;"
                v-if="TestingDetailsData.heartRateStatus == 2">偏低
                <view
                  style="width: 28rpx;height: 28rpx;display: flex; align-items: center; justify-content: center; border: 2rpx solid #D89C03; border-radius: 50%; margin-left: 10rpx;">
                  <u-icon name="error" color="#D89C03" size="20"></u-icon>
                </view>
              </text>
            </view>
            <view><text class="detectionNum"
                :style="{ color: TestingDetailsData.highBloodPressureStatus == 0 ? '#008535' : TestingDetailsData.highBloodPressureStatus == 1 ? '#960202' : '#D89C03' }">{{
                  TestingDetailsData.highBloodPressure }}</text>mmHG</view>
          </view>
          <view style="margin-top: 76rpx; display:flex; justify-content:space-between;">
            <view>
              <view style="font-size:30rpx;">
                60-90
              </view>
              <view style="color:#999999;">
                标准范围
              </view>
            </view>
            <view>
              <image style="width:64rpx;height:64rpx;" src="../static/image/pagesHealth/Lowbloodpressure.png"
                mode="scaleToFill" />
            </view>
          </view>
        </view>
        <view class="myselfdata"
          :style="{ backgroundColor: TestingDetailsData.bloodOxygenStatus == 0 ? '#ffffff' : TestingDetailsData.bloodOxygenStatus == 1 ? '#fff5f5' : '#FFFCF5' }">
          <view style="display: flex; align-items:center">
            <view>
              <view style="width: 128rpx;">血氧</view>
              <text style="font-size: 24rpx;" v-if="TestingDetailsData.bloodOxygenStatus == 0">暂无异常</text>
              <text
                style="font-size: 24rpx; color:#FF0000; width: 96rpx;height: 34rpx;  display: flex; align-items: center;"
                v-if="TestingDetailsData.heartRateStatus == 1">过高
                <view
                  style="width: 28rpx;height: 28rpx;display: flex; align-items: center; justify-content: center; border: 2rpx solid #FF0000; border-radius: 50%; margin-left: 10rpx;">
                  <u-icon name="error" color="#FF0000" size="20"></u-icon>
                </view>
              </text>
              <text
                style="font-size: 24rpx; color: #D89C03;width: 96rpx;height: 34rpx; display: flex; align-items: center;"
                v-if="TestingDetailsData.heartRateStatus == 2">偏低
                <view
                  style="width: 28rpx;height: 28rpx;display: flex; align-items: center; justify-content: center; border: 2rpx solid #D89C03; border-radius: 50%; margin-left: 10rpx;">
                  <u-icon name="error" color="#D89C03" size="20"></u-icon>
                </view>
              </text>
            </view>
            <view><text class="detectionNum"
                :style="{ color: TestingDetailsData.bloodOxygenStatus == 0 ? '#008535' : TestingDetailsData.bloodOxygenStatus == 1 ? '#960202' : '#D89C03' }">{{
                  TestingDetailsData.bloodOxygen }}</text>%</view>
          </view>
          <view style="margin-top: 76rpx; display:flex; justify-content:space-between;">
            <view>
              <view style="font-size:30rpx;">
                94%-100%
              </view>
              <view style="color:#999999;">
                标准范围
              </view>
            </view>
            <view>
              <image style="width:64rpx;height:64rpx;" src="../static/image/pagesHealth/Bloodoxygen.png"
                mode="scaleToFill" />
            </view>
          </view>
        </view>
        <view class="myselfdata"
          :style="{ backgroundColor: TestingDetailsData.triglycerideStatus == 0 ? '#ffffff' : TestingDetailsData.triglycerideStatus == 1 ? '#fff5f5' : '#FFFCF5' }">
          <view style="display: flex; align-items:center">
            <view>
              <view style="width: 128rpx;">甘油三酯</view>
              <text style="font-size: 24rpx;" v-if="TestingDetailsData.triglycerideStatus == 0">暂无异常</text>
              <text
                style="font-size: 24rpx; color:#FF0000; width: 96rpx;height: 34rpx;  display: flex; align-items: center;"
                v-if="TestingDetailsData.heartRateStatus == 1">过高
                <view
                  style="width: 28rpx;height: 28rpx;display: flex; align-items: center; justify-content: center; border: 2rpx solid #FF0000; border-radius: 50%; margin-left: 10rpx;">
                  <u-icon name="error" color="#FF0000" size="20"></u-icon>
                </view>
              </text>
              <text
                style="font-size: 24rpx; color: #D89C03;width: 96rpx;height: 34rpx; display: flex; align-items: center;"
                v-if="TestingDetailsData.heartRateStatus == 2">偏低
                <view
                  style="width: 28rpx;height: 28rpx;display: flex; align-items: center; justify-content: center; border: 2rpx solid #D89C03; border-radius: 50%; margin-left: 10rpx;">
                  <u-icon name="error" color="#D89C03" size="20"></u-icon>
                </view>
              </text>
            </view>
            <view><text class="detectionNum"
                :style="{ color: TestingDetailsData.triglycerideStatus == 0 ? '#008535' : TestingDetailsData.triglycerideStatus == 1 ? '#960202' : '#D89C03' }">{{
                  TestingDetailsData.triglyceride }}</text>mmol/L</view>
          </view>
          <view style="margin-top: 76rpx; display:flex; justify-content:space-between;">
            <view>
              <view style="font-size:30rpx;">
                0.56-1.70
              </view>
              <view style="color:#999999;">
                标准范围
              </view>
            </view>
            <view>
              <image style="width:64rpx;height:64rpx;" src="../static/image/pagesHealth/glycerol.png"
                mode="scaleToFill" />
            </view>
          </view>
        </view>
        <view class="myselfdata"
          :style="{ backgroundColor: TestingDetailsData.bloodGlucoseStatus == 0 ? '#ffffff' : TestingDetailsData.bloodGlucoseStatus == 1 ? '#fff5f5' : '#FFFCF5' }">
          <view style="display: flex; align-items:center">
            <view>
              <view style="width: 128rpx;">血糖</view>
              <text style="font-size: 24rpx;" v-if="TestingDetailsData.bloodGlucoseStatus == 0">暂无异常</text>
              <text
                style="font-size: 24rpx; color:#FF0000; width: 96rpx;height: 34rpx;  display: flex; align-items: center;"
                v-if="TestingDetailsData.heartRateStatus == 1">过高
                <view
                  style="width: 28rpx;height: 28rpx;display: flex; align-items: center; justify-content: center; border: 2rpx solid #FF0000; border-radius: 50%; margin-left: 10rpx;">
                  <u-icon name="error" color="#FF0000" size="20"></u-icon>
                </view>
              </text>
              <text
                style="font-size: 24rpx; color: #D89C03;width: 96rpx;height: 34rpx; display: flex; align-items: center;"
                v-if="TestingDetailsData.heartRateStatus == 2">偏低
                <view
                  style="width: 28rpx;height: 28rpx;display: flex; align-items: center; justify-content: center; border: 2rpx solid #D89C03; border-radius: 50%; margin-left: 10rpx;">
                  <u-icon name="error" color="#D89C03" size="20"></u-icon>
                </view>
              </text>
            </view>
            <view><text class="detectionNum"
                :style="{ color: TestingDetailsData.bloodGlucoseStatus == 0 ? '#008535' : TestingDetailsData.bloodGlucoseStatus == 1 ? '#960202' : '#D89C03' }">{{
                  TestingDetailsData.bloodGlucose }}</text>mmol/L</view>
          </view>
          <view style="margin-top: 76rpx; display:flex; justify-content:space-between;">
            <view>
              <view style="font-size:30rpx;">
                7-8
              </view>
              <view style="color:#999999;">
                标准范围
              </view>
            </view>
            <view>
              <image style="width:64rpx;height:64rpx;" src="../static/image/pagesHealth/bloodsugar.png"
                mode="scaleToFill" />
            </view>
          </view>
        </view>
        <view class="myselfdata"
          :style="{ backgroundColor: TestingDetailsData.cholesterinStatus == 0 ? '#ffffff' : TestingDetailsData.cholesterinStatus == 1 ? '#fff5f5' : '#FFFCF5' }">
          <view style="display: flex; align-items:center">
            <view>
              <view style="width: 128rpx;">总胆固醇</view>
              <text style="font-size: 24rpx;" v-if="TestingDetailsData.cholesterinStatus == 0">暂无异常</text>
              <text
                style="font-size: 24rpx; color:#FF0000; width: 96rpx;height: 34rpx;  display: flex; align-items: center;"
                v-if="TestingDetailsData.heartRateStatus == 1">过高
                <view
                  style="width: 28rpx;height: 28rpx;display: flex; align-items: center; justify-content: center; border: 2rpx solid #FF0000; border-radius: 50%; margin-left: 10rpx;">
                  <u-icon name="error" color="#FF0000" size="20"></u-icon>
                </view>
              </text>
              <text
                style="font-size: 24rpx; color: #D89C03;width: 96rpx;height: 34rpx; display: flex; align-items: center;"
                v-if="TestingDetailsData.heartRateStatus == 2">偏低
                <view
                  style="width: 28rpx;height: 28rpx;display: flex; align-items: center; justify-content: center; border: 2rpx solid #D89C03; border-radius: 50%; margin-left: 10rpx;">
                  <u-icon name="error" color="#D89C03" size="20"></u-icon>
                </view>
              </text>
            </view>
            <view><text class="detectionNum"
                :style="{ color: TestingDetailsData.cholesterinStatus == 0 ? '#008535' : TestingDetailsData.cholesterinStatus == 1 ? '#960202' : '#D89C03' }">{{
                  TestingDetailsData.cholesterin }}</text>mmol/L</view>
          </view>
          <view style="margin-top: 76rpx; display:flex; justify-content:space-between;">
            <view>
              <view style="font-size:30rpx;">
                3.12-5.17
              </view>
              <view style="color:#999999;">
                标准范围
              </view>
            </view>
            <view>
              <image style="width:64rpx;height:64rpx;" src="../static/image/pagesHealth/cholesterol.png"
                mode="scaleToFill" />
            </view>
          </view>
        </view>
        <view class="myselfdata"
          :style="{ backgroundColor: TestingDetailsData.trioxypurineStatus == 0 ? '#ffffff' : TestingDetailsData.trioxypurineStatus == 1 ? '#fff5f5' : '#FFFCF5' }">
          <view style="display: flex; align-items:center">
            <view>
              <view style="width: 128rpx;">尿酸</view>
              <text style="font-size: 24rpx;" v-if="TestingDetailsData.trioxypurineStatus == 0">暂无异常</text>
              <text
                style="font-size: 24rpx; color:#FF0000; width: 96rpx;height: 34rpx;  display: flex; align-items: center;"
                v-if="TestingDetailsData.heartRateStatus == 1">过高
                <view
                  style="width: 28rpx;height: 28rpx;display: flex; align-items: center; justify-content: center; border: 2rpx solid #FF0000; border-radius: 50%; margin-left: 10rpx;">
                  <u-icon name="error" color="#FF0000" size="20"></u-icon>
                </view>
              </text>
              <text
                style="font-size: 24rpx; color: #D89C03;width: 96rpx;height: 34rpx; display: flex; align-items: center;"
                v-if="TestingDetailsData.heartRateStatus == 2">偏低
                <view
                  style="width: 28rpx;height: 28rpx;display: flex; align-items: center; justify-content: center; border: 2rpx solid #D89C03; border-radius: 50%; margin-left: 10rpx;">
                  <u-icon name="error" color="#D89C03" size="20"></u-icon>
                </view>
              </text>
            </view>
            <view><text class="detectionNum"
                :style="{ color: TestingDetailsData.trioxypurineStatus == 0 ? '#008535' : TestingDetailsData.trioxypurineStatus == 1 ? '#960202' : '#D89C03' }">{{
                  TestingDetailsData.trioxypurine }}</text>mmol/L</view>
          </view>
          <view style="margin-top: 76rpx; display:flex; justify-content:space-between;">
            <view>
              <view style="font-size:30rpx;">
                150-416
              </view>
              <view style="color:#999999;">
                标准范围
              </view>
            </view>
            <view>
              <image style="width:64rpx;height:64rpx;" src="../static/image/pagesHealth/uricacid.png"
                mode="scaleToFill" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
let that = this
export default {
  data() {
    return {
      statusBarHeight: 0,
      TestingDetailsData: {}
    }

  },
  onLoad() {
    that = this
    that.statusBarHeight = uni.getStorageSync('statusBarHeight')
    console.log('导航栏高度:', that.statusBarHeight);
    uni.$on('TestingDetails', (data) => {
      console.log('检测数据', data)
      that.TestingDetailsData = data
    })
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1,
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.boxtop {
  width: 100vw;
  height: 100vh;
  padding: 0 32rpx;
  background-color: #FAFAFA;

  .healtharchives {
    width: 407rpx;
    display: flex;
    justify-content: space-between;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
    align-items: center;

    image {
      width: 12rpx;
      height: 24rpx;
    }
  }

  .healthname {
    margin-top: 48rpx;
    padding: 10rpx 27rpx;
    background: #FAFAFA;
    box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 20rpx;
    display: flex;
    justify-content: space-between;
  }

  .self {
    padding: 18rpx 0;
    margin-top: 36rpx;
    border: 1rpx solid #F5F5F5;
    border-radius: 40rpx;
  }

  .myselfdata {
    width: 328rpx;
    padding: 12rpx 20rpx;
    // background-color: #FFFFFF;
    margin-top: 16rpx;
    box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.08);
    border-radius: 12rpx;
  }
}

.detectionNum {
  width: 130rpx;
  font-size: 40rpx;
}
</style>